<template>
  <Dialog
    :title="comInfo.name"
    :show="true"
    @close="cancel"
    :width="300"
    height="auto"
    :left="uiLeft"
    :top="60"
  >
    <div class="box" @click="whiteSpaceClick">
      <div class="item1">
        <div>是否编辑：</div>
        <div class="edit">
          <el-switch v-model="editingRef" size="small" />
          <el-button @click.stop="draw"> 重新绘制</el-button>
        </div>
      </div>
      <div class="item1">
        <div class="key">名称:</div>
        <el-input v-model.lazy="name" placeholder="请输入名称" />
      </div>
      <div class="item1">
        <div class="key">最低高程:</div>
        <el-input v-model.lazy="bottom" :disabled="true" type="number" />
      </div>
      <div class="item2">
        <div class="key"></div>
        <div>
          <el-button @click.stop="flat">纯平</el-button>
          <el-button @click.stop="offset">偏移</el-button>
        </div>
      </div>
      <div class="item2" v-show="showSlider">
        <div class="key"></div>
        <div class="fuc">
          <el-slider
            v-model="offsetVal"
            @input="offsetChange"
            :min="-10"
            :max="10"
            :step="0.1"
            :show-tooltip="true"
            style="width: 170px"
          />
        </div>
      </div>
      <div class="item1">
        <div class="key">柱体高度:</div>
        <el-input
          type="number"
          v-model="ceilling"
          placeholder="请输入高度"
          min=""
        />
      </div>
      <div class="btn1">
        <el-button
          @click="submit"
          :disabled="
            !name ||
            !eSGeoExtrudedPolygonUFMS ||
            eSGeoExtrudedPolygonUFMS.editing ||
            !eSGeoExtrudedPolygonUFMS.points ||
            !eSGeoExtrudedPolygonUFMS.points.length
          "
          >创建</el-button
        >
      </div>
    </div>
  </Dialog>
</template>
<script setup lang="ts">
import {
  createVueDisposer,
  toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import Dialog from "../../components/Dialog.vue";
import { onBeforeUnmount, ref, onMounted, computed, watch } from "vue";
import { getProjectManager } from "../../scripts/getProjectManager";
import TooltipCom from "@/components/common/TooltipCom.vue";
import { ESGeoExtrudedPolygonUFMS } from "@/scripts/esobjs/ESGeoExtrudedPolygonUFMS";
import { getsceneObjNumfromSceneTree, processNum } from "@/scripts/utils";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const uiLeft = ref(document.body.clientWidth - 10 - 300);

const emits = defineEmits(["cancel"]);
const cancel = () => {
  emits("cancel", props.comInfo.id);
};

const d = createVueDisposer(onBeforeUnmount);

const objm = getProjectManager();
const modelser2Manager = objm.modelser2Manager;
const modelser2SceneTreeWrapper = objm.modelser2SceneTreeWrapper;
const modelserManager = getProjectManager().modelserManager;

const editPolygon = modelserManager.editPolygon;

let eSGeoExtrudedPolygonUFMS: any = ref("");
let editingRef = ref(false);

const create = () => {
  eSGeoExtrudedPolygonUFMS.value = d.ad(
    objm.createSceneObject(ESGeoExtrudedPolygonUFMS) as ESGeoExtrudedPolygonUFMS
  );
  d.dispose(() => {
    eSGeoExtrudedPolygonUFMS.value.editing = false;
    eSGeoExtrudedPolygonUFMS.value &&
      objm.destroySceneObject(eSGeoExtrudedPolygonUFMS.value);
  });
  eSGeoExtrudedPolygonUFMS.value.fillColor = [1, 0, 0, 0.5];
  eSGeoExtrudedPolygonUFMS.value.absoluteBottom = false;
  editingRef.value = true;

  eSGeoExtrudedPolygonUFMS.value.dispose(
    eSGeoExtrudedPolygonUFMS.value.pointsChanged.disposableOn((e: any) => {
      bottom.value = processNum(
        editPolygon.getMinHeight(eSGeoExtrudedPolygonUFMS.value.points)
      );
      eSGeoExtrudedPolygonUFMS.value.ceilling =
        Number(ceilling.value) +
        editPolygon.getMaxHeight(eSGeoExtrudedPolygonUFMS.value.points);
    })
  );
  eSGeoExtrudedPolygonUFMS.value.dispose(
    eSGeoExtrudedPolygonUFMS.value.editingChanged.disposableOn((val: any) => {
      editingRef.value = val;
    })
  );
  updateParam();
};

watch(editingRef, (val) => {
  if (!eSGeoExtrudedPolygonUFMS.value) return;
  eSGeoExtrudedPolygonUFMS.value.editing = val;
});

const bottom = ref(0);
const name = ref("");

const ceilling = ref(10);

// 重新绘制
const draw = () => {
  if (eSGeoExtrudedPolygonUFMS.value.editing) {
    eSGeoExtrudedPolygonUFMS.value.editing = false;
  }
  eSGeoExtrudedPolygonUFMS.value.points = [];
  eSGeoExtrudedPolygonUFMS.value.editing = true;
};

// 纯平
const flat = () => {
  eSGeoExtrudedPolygonUFMS.value.points =
    eSGeoExtrudedPolygonUFMS.value.points.map((p: [number, number, number]) => [
      p[0],
      p[1],
      editPolygon.getMinHeight(eSGeoExtrudedPolygonUFMS.value.points),
    ]);
};

// 偏移值
const offsetVal = ref(0);
// 底部高程默认值
const bottomDefault = ref<any>([]);

// 是否显示滑块
const showSlider = ref(false);

// 偏移
const offset = () => {
  offsetVal.value = 0;
  bottomDefault.value = [];
  showSlider.value = true;
  bottomDefault.value = JSON.parse(
    JSON.stringify(eSGeoExtrudedPolygonUFMS.value.points)
  );
};

// 偏移监听
const offsetChange = (val: number) => {
  eSGeoExtrudedPolygonUFMS.value.points =
    eSGeoExtrudedPolygonUFMS.value.points.map(
      (p: [number, number, number], i: number) => [
        p[0],
        p[1],
        bottomDefault.value[i][2] + val,
      ]
    );
};

// 点击空白
const whiteSpaceClick = () => {
  showSlider.value = false;
};

const updateParam = () => {
  eSGeoExtrudedPolygonUFMS.value.bottom = Number(bottom.value);
  eSGeoExtrudedPolygonUFMS.value.ceilling =
    Number(ceilling.value) +
    editPolygon.getMaxHeight(eSGeoExtrudedPolygonUFMS.value.points);
};

// 监听顶面高度模式和变化
watch([bottom, ceilling], () => {
  updateParam();
});

const currentDialog = ref(false);
// 提交
const submit = async () => {
  const srcGeom = eSGeoExtrudedPolygonUFMS.value.srcGeom;
  const geojson = {
    type: srcGeom.type,
    coordinates: [[...srcGeom.coordinates[0].map((p: any) => [p[0], p[1]])]],
  };
  const param = {
    tileServiceName: modelser2Manager.eSMsTileset.tileServiceName,
    name: name.value,
    geojson: JSON.stringify(geojson),
    minH: eSGeoExtrudedPolygonUFMS.value.bottom,
    maxH: eSGeoExtrudedPolygonUFMS.value.ceilling,
  };
  console.log("param", param);
  await modelser2Manager.createMonomer(param);
  eSGeoExtrudedPolygonUFMS.value.editing = false;
  eSGeoExtrudedPolygonUFMS.value && objm.destroySceneObject(eSGeoExtrudedPolygonUFMS.value);
  create();
};

onMounted(() => {
  create();
});
</script>

<style scoped>
.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item1 {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  margin-bottom: 8px;
}

.item2 {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
}

.fuc {
  display: flex;
}

.btn1 {
  display: flex;
  justify-content: flex-end;
  /* justify-content: space-between; */
}

.el-button {
  margin-left: 0px !important;
}

.edit {
  display: flex;
  gap: 20px;
  align-items: center;
}
</style>
